﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="PageTitle" runat="server">
    <title>易得桌面</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageStyles" runat="server">
    <style type="text/css">
        .entryExplanation
        {
            font-weight: bolder;
            font-size: 14px;
            background-color: #FFEC8B;
        }
        .avatar
        {
            float: left;
            margin-right: 10px;
            padding: 10px;
            text-align: center;
            width: 110px;
            background: none repeat scroll 0 0 #E5E5E5;
        }
        .active-input
        {
            width: 150px;
        }
        .formBox
        {
            padding: 5px;
            border: 1px solid #A9A9A9;
            margin: 5px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PageScripts" runat="server">
    <script src="../../Scripts/ajaxupload.js"></script>
    <script type="text/javascript">


    //************* URL常量
    var URL_UPDATE_STAFFINFO = "/Staff/DoUpdateContactInfo";
    //************* 全局变量
    var g_Var = {
        "dataStorage": null
    };

    //************* 常量定义
    var StaticResource = {
};
//************* Accessor访问器


var EzAccessor = {};
function CreateAccessor() {
    if (ezmock.IS_MOCKED) {
        EzAccessor = CreateMockEzAccessor();

    } else {
        EzAccessor = CreateRealEzAccessor();
    }
}





function CreateMockEzAccessor() {
    var mock_currentUser = {
        "Id": "0c9d7c0c-04a5-4ae2-97a1-d7bbc38f5c66",
        "Name": "杨裕欣", "UserName": "yuxin",
        "Dept": {
            "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
            "DeptName": "软件工程部",
            "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
        }
    };

    var mock_staffInfos = {
        "QqNumber": null,
        "MobileNo": "18801963408",
        "MainEmail": "meteor1211@gmail.com"
    };

    //模拟实现服务器交互方法
    var mockEzAccessor = {
        "getCurrentUser": function () {
            return mock_currentUser;
        },
        "getStaffInfos": function () {
            return mock_staffInfos;
        },
        "doUpdateStaffInfo": function (qqNumber, mobileNo, mainEmail) {
            alert(qqNumber);
            alert(mobileNo);
            alert(mainEmail);
        }

    };
    return mockEzAccessor;
}


function CreateRealEzAccessor() {
    //实现服务器交互方法
    var realEzAccessor = {
        "getCurrentUser": function () {
                        return <%= ViewData["CurrentUser"] %>;
        },
        "getStaffInfos": function () {
                        return <%= ViewData["StaffInfos"] %>;
        },
        "doUpdateStaffInfo": function (userId, qqNumber, mobileNo, mainEmail) {
            $(document).ajaxBusy('begin');
            $.post(
                        URL_UPDATE_STAFFINFO,
                        {
                            'userId': userId,
                            'qqNumber': qqNumber,
                            'mobileNo': mobileNo,
                            'mainEmail': mainEmail
                        },
                        function (e) {
                            $(document).ajaxBusy('end');
                            $.displayStatusInfo(e);

                        }
                );
        }
    };

    return realEzAccessor;
}


function bindSimpleInfo(currentUser) {
    $('#lblUserName').html(currentUser.Name);
    $('#lblDeptName').html(currentUser.Dept.DeptName);
};



function bindStaffInfos(staffInfos) {
    $('#liQqNumber .active-input').val(staffInfos.QqNumber);
    $('#liMobileNo .active-input').val(staffInfos.MobileNo);
    $('#liEmail .active-input').val(staffInfos.MainEmail);
};


//上传头像
function uploadHeadIcon(){
    var button = $('#btnUploadHeadIcon'), interval;
	var isUploading =  $('#txtUploading');
    	
	new AjaxUpload(button, {
		action: '/staff/doImageUpload', 
		name: 'headIcon',
		onSubmit : function(file, ext){
            if (ext && /^(jpg|jpeg|png)$/.test(ext)){
                /* Setting data */
                button.hide();
                isUploading.show();
			    $(document).ajaxBusy('begin');
			    this.disable();
			    interval = window.setInterval(function(){
			        button.hide();
                    isUploading.show();	
			    });
            } else {
                var statusInfo = { 'Status': 'Error', 'Info': '头像必须是jpg或png格式！', 'Data': null };
                $.displayStatusInfo(statusInfo);
                return false;
            }
        },
		onComplete: function(file, response){
            button.show();
            isUploading.hide();	
			
            $('#personalGravatar').attr('src', '/core/headicon/' + (new Date).toEpoch())
            
            $(document).ajaxBusy('end'); 
            var statusInfo = JSON.parse($(response).html());
            $.displayStatusInfo(statusInfo);
            window.clearInterval(interval);
			
            this.enable();
		}
	});
}


function initPage() {
    $(document).ajaxBusy();
    EzTipsManager.addTipBox('#tip_remind', 'tipRemind');
    EzTipsManager.showTipBox('tipRemind');

    CreateAccessor();
    
    bindSimpleInfo(EzAccessor.getCurrentUser());
    bindStaffInfos(EzAccessor.getStaffInfos());
    uploadHeadIcon();
    //HeadIcon Upload
    $('#formHeadIconUpload').ajaxForm();
    //EzFormDialog
    $('#extraInfo').formDialog({
        onDataReady: function (event, isOnOK) {
            if (isOnOK == true) {
                $('#divSubmit').show();
                $('#extraInfo').css({'border-color': "red"});
            }
            else {
                $('#divSubmit').hide();
                $('#extraInfo').css({'border-color': "transparent"});
            }
        }
    });
    $('#myContactForm').validate();
}



function initPageEvent() {

    $('#btnCancel').click(function () {
        //$('#extraInfo').css({'border-color': "transparent"});
        $('#extraInfo').formDialog('resetData');        
    });


    $('#btnSubmit').click(function () {
        var qqNumber = $('#liQqNumber .active-input').val();
        var mobileNumber = $('#liMobileNo .active-input').val();
        var mainEmail = $('#liEmail .active-input').val();

        EzAccessor.doUpdateStaffInfo(EzAccessor.getCurrentUser().Id,
                                     qqNumber,
                                     mobileNumber,
                                     mainEmail);

        $('#extraInfo').css({'border-color': "transparent"});
        $('#divSubmit').hide();
    });

}
$(function () {
    initPage();
    initPageEvent();
});
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageHead" runat="server">
    <%
        Html.RenderPartial("_sayHello"); %>
    <div id="status-bar"><% Html.RenderPartial("_navigateTo"); %></div>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="PageContent" runat="server">
    <div id="page-head">
        <img src="../../Content/icons/myContact.png" style="width: 48px; height: 48px;" alt="myContact" />
        <span>个人信息</span>
    </div>
    <div id="page-body">
        <div class="avatar">
            <img id="personalGravatar" height="100" width="100" src="/core/headicon" alt="headIcon" />
            <div style="margin: 5px;">
                <a id="btnUploadHeadIcon">修改我的头像</a>
                <p id="txtUploading" style="color: #2E6600; display: none;">
                    正在上传中..</p>
            </div>
        </div>
        <form id="myContactForm" name="myContactForm" style="margin-left: 140px;">
            <div>
                <span class="entryExplanation">基本信息</span> <span>基本信息暂时是不可以修改的哦！ </span>
            </div>
            <div style="padding: 5px; margin: 5px; border: 1px solid #A9A9A9; min-height: 80px;">
                <ul class="fieldslist">
                    <li>
                        <div class="l">
                            <label>
                                姓名：
                            </label>
                        </div>
                        <div class="r">
                            <label id="lblUserName">
                            </label>
                        </div>
                    </li>
                    <li>
                        <div class="l">
                            <label>
                                部门：
                            </label>
                        </div>
                        <div class="r">
                            <label id="lblDeptName">
                            </label>
                        </div>
                    </li>
                </ul>
            </div>
            <div style="margin-top: 20px;">
                <div>
                    <span class="entryExplanation">扩展信息</span> <span>如果您更换了联系方式，请及时更新。</span>
                </div>
                <div id="extraInfo" class="formBox">
                    <ul class="fieldslist">
                        <li class="active-container">
                            <div class="l">
                                <label>
                                    QQ：
                                </label>
                            </div>
                            <div class="r">
                                <div id="liQqNumber">
                                    <input class="active-input number" />
                                </div>
                            </div>
                        </li>
                        <li class="active-container">
                            <div class="l">
                                <label>
                                    手机：
                                </label>
                            </div>
                            <div class="r">
                                <div id="liMobileNo">
                                    <input class="active-input number" length="11"/>
                                </div>
                            </div>
                        </li>
                        <li class="active-container">
                            <div class="l">
                                <label>
                                    E-mail：
                                </label>
                            </div>
                            <div class="r">
                                <div id="liEmail">
                                    <input class="active-input email" />
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div id="divSubmit" style="display: none; margin-top: 10px; margin-left: 5px;">
                        <input type="button" id="btnSubmit" value="确定修改" />
                        或者 <a id="btnCancel">&nbsp;取消&nbsp;</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="page-submit" style="display: none;">
    </div>
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="PageShortcut" runat="server">
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="PageFoot" runat="server">
    <div id="tip_remind" style="display: none; min-height: 130px;">
        <h1>
            小贴士</h1>
        <p class="indent">
            这里您可以看到自己的基本信息和扩展信息，同时可以修改自己的联系方式。方便大家联系！
        </p>
    </div>
</asp:Content>
